<template>
	<div class="xpertNav" :class="{ navBg: statusTab == 2 }">
		<!-- 这个是Xpert导航=========================================================== -->
		<div>
			<!-- 未登录状态 -->
			<div v-if="ind == 1" class="center m-0-a f f-a-c f-j-b">
				<!-- logo -->
				<div @click="goPageHomXp" class="leftImg hand"><img :src="logoObj.value || '/src/assets/Logo@2x.png'" class="logo" alt="" /></div>
				<!-- xpert头部导航栏 -->
				<div class="navRig f f-a-c">
					{{ ind }}
					<div v-for="(item, index) in list" :key="item.value" @click="goNav(item.path, item.value)" :class="{ btn: index == 3 }" class="navItem hand">{{ item.name }}</div>
				</div>
			</div>
			<!-- 已登录状态的卖家tab -->
			<div v-if="ind == 2" class="useLogin m-0-a f f-a-c f-j-b">
				<div @click="goPageHomXp" class="leftImg hand"><img :src="logoObj.value || '/src/assets/Logo@2x.png'" class="logo" alt="" /></div>
				<div class="navRig f f-a-c">
					<div @click="goNav('/Industry')" class="industry hand">By Industry</div>
					<div @click="goNav('/KnowClub')" class="industry hand">KnowClub</div>
					<div @click="goNav('/MyOrder')" class="industry hand">My orders</div>
					<div class="message hand"><img src="/src/assets/serch/msg.png" class="msgImg" alt="" /></div>
					{{ ind }}
					<div class="message hand">
						<a-dropdown>
							<a class="ant-dropdown-link hand" @click.prevent>
								<div class="msg">{{ messageNum }}</div>
								<img src="/src/assets/serch/ling.png" class="msgImg" alt="" />
							</a>
							<template #overlay>
								<a-menu style="margin-left: -150px; padding: 10px; margin-top: 20px">
									<div v-for="(item, index) in messageList" :key="index">
										<a-menu-item>
											<div @click="goSetting" style="width: 200px" class="boxIncomsss">
												<div :class="{ acts: item.readStatus }" style="color: #02102e" class="setting o-f-2">{{ item.content }}</div>
												<div style="color: #8590a1">{{ getTimes(item.createTime) }}</div>
											</div>
										</a-menu-item>
									</div>
									<div style="text-align: center; text-decoration: underline" class="hand f f-a-c f-j-c">
										<div @click="goMoerNov" class="setting">More</div>
									</div>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
					<div class="avaetImg hand"><img :src="userObj.avatar || ''" style="width: 48px; height: 48px; border-radius: 24px" class="" alt="" /></div>
					<div class="avaet">
						<a-dropdown>
							<a class="ant-dropdown-link hand" @click.prevent>
								{{ userObj.firstName }} {{ userObj.lastName }}
								<img src="/src/assets/serch/xia.png" style="width: 12px; margin-left: 4px" alt="" />
							</a>
							<template #overlay>
								<a-menu style="padding: 20px; margin-top: 30px">
									<a-menu-item>
										<div @click="SwitchBuy" class="buying">Switch to buying</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goNav('/KnowClub')" class="KnowClub">KnowClub</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goSetting" class="boxIncom f f-a-c">
											<img src="/src/assets/user/setting.png" class="settImg" alt="" />
											<div class="setting">Account setting</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goIcome" class="boxIncom f f-a-c">
											<img src="/src/assets/user/qian.png" class="settImg" alt="" />
											<div class="setting">Income</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goSRequest" class="boxIncom f f-a-c">
											<img src="/src/assets/user/ben.png" class="settImg" alt="" />
											<div class="setting">Request</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goMyOrder" class="boxIncom f f-a-c">
											<img src="/src/assets/user/order.png" class="settImg" alt="" />
											<div class="setting">Order</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goMylist" class="boxIncom f f-a-c">
											<img src="/src/assets/user/list.png" class="settImg" alt="" />
											<div class="setting">List</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div class="boxIncom f f-a-c">
											<img src="/src/assets/user/user.png" class="settImg" alt="" />
											<div class="setting">View my profile</div>
										</div>
									</a-menu-item>
									<div class="boxIncoms hand f f-a-c f-j-c">
										<div @click="signOut(1)" class="setting">Sign out</div>
									</div>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
				</div>
			</div>
			<!-- 已登录状态的买家tab -->
			<div v-if="ind == 3" class="useLogin m-0-a f f-a-c f-j-b">
				<div @click="goPageHomXp" class="leftImg hand"><img :src="logoObj.value || '/src/assets/Logo@2x.png'" class="logo" alt="" /></div>
				<div class="navRig f f-a-c">
					<div @click="goNav('/Industry')" class="industry hand">By Industry</div>
					<div @click="goNav('/KnowClub')" class="industry hand">KnowClub</div>
					<div @click="goNav('/UseMyOrder')" class="industry hand">My orders</div>
					<div @click="SwitchSellers" class="industry hand">Become a seller</div>
					<div @click="goNav('/ChatView')" class="message hand"><img src="/src/assets/serch/msg.png" class="msgImg" alt="" /></div>
					{{ ind }}
					<div class="message hand">
						<a-dropdown>
							<a class="ant-dropdown-link hand" @click.prevent>
								<div class="msg">{{ messageNum }}</div>
								<img src="/src/assets/serch/ling.png" class="msgImg" alt="" />
							</a>
							<template #overlay>
								<a-menu style="margin-left: -150px; padding: 10px; margin-top: 20px">
									<div v-for="(item, index) in messageList" :key="index">
										<a-menu-item>
											<div @click="goSetting" style="width: 200px" class="boxIncomsss">
												<div :class="{ acts: item.readStatus }" style="color: #02102e" class="setting o-f-2">{{ item.content }}</div>
												<div style="color: #8590a1">{{ getTimes(item.createTime) }}</div>
											</div>
										</a-menu-item>
									</div>
									<div style="text-align: center; text-decoration: underline" class="hand f f-a-c f-j-c">
										<div @click="goMoerNov" class="setting">More</div>
									</div>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
					<div class="avaetImg hand"><img :src="userObj?.avatar || ''" style="width: 48px; height: 48px; border-radius: 24px" class="" alt="" /></div>
					<div class="avaet">
						<a-dropdown>
							<a class="ant-dropdown-link hand" @click.prevent>
								{{ userObj?.firstName || "" }} {{ userObj?.lastName || "" }}
								<img src="/src/assets/serch/xia.png" style="width: 12px; margin-left: 4px" alt="" />
							</a>
							<template #overlay>
								<a-menu style="padding: 20px; margin-top: 30px">
									<a-menu-item>
										<div @click="SwitchSellers" class="buying">Switch to selling</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goNav('/KnowClub')" class="KnowClub">KnowClub</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goBuyerSetting" class="boxIncom f f-a-c">
											<img src="/src/assets/user/setting.png" class="settImg" alt="" />
											<div class="setting">Account setting</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goUseRequest" class="boxIncom f f-a-c">
											<img src="/src/assets/user/ben.png" class="settImg" alt="" />
											<div class="setting">Request</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goUseMyOrder" class="boxIncom f f-a-c">
											<img src="/src/assets/user/order.png" class="settImg" alt="" />
											<div class="setting">Order</div>
										</div>
									</a-menu-item>
									<a-menu-item>
										<div @click="goMylist" class="boxIncom f f-a-c">
											<img src="/src/assets/user/list.png" class="settImg" alt="" />
											<div class="setting">List</div>
										</div>
									</a-menu-item>
									<div class="boxIncoms hand f f-a-c f-j-c">
										<div @click="signOut(1)" class="setting">Sign out</div>
									</div>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
				</div>
			</div>
		</div>
		<!-- 这个是KnowClub导航=========================================================== -->
		<!-- 未登录状态 -->
		<div v-if="ind == 4" class="center m-0-a f f-a-c f-j-b">
			<!-- logo -->
			<div @click="goPageHome" class="leftImgs hand"><img :src="logoObj.value || '/src/assets/logos.png'" class="logo" alt="" /></div>
			<!-- xpert头部导航栏 -->
			<div class="navRig f f-a-c">
				{{ ind }}
				<div v-for="(item, index) in list4" :key="item.value" @click="goNav(item.path, item.value)" :class="{ btns: index == 3 }" class="navItem hand">{{ item.name }}</div>
			</div>
		</div>
		<!-- 已登录状态的卖家tab -->
		<div v-if="ind == 5" class="useLogin m-0-a f f-a-c f-j-b">
			<!-- <div @click="goPageHome" class="leftText hand">KnowClub@ Xpert</div> -->
			<div @click="goPageHome" class="leftImgs hand"><img :src="logoObj.value || '/src/assets/logos.png'" class="logo" alt="" /></div>

			<div class="navRig f f-a-c">
				<div @click="goNav('/')" class="industry hand">Xpert</div>
				<div @click="goNav('/KnowClub/MoreIndustry')" class="industry hand">By industry</div>
				<div @click="goNav('/KnowClubMyClubb')" class="industry hand">My Club</div>
				<div @click="goNav('/ChatView')" class="message hand"><img src="/src/assets/serch/msg.png" class="msgImg" alt="" /></div>
				{{ ind }}
				<div class="message hand">
					<a-dropdown>
						<a class="ant-dropdown-link hand" @click.prevent>
							<div class="msg">{{ messageNum }}</div>
							<img src="/src/assets/serch/ling.png" class="msgImg" alt="" />
						</a>
						<template #overlay>
							<a-menu style="margin-left: -150px; padding: 10px; margin-top: 20px">
								<div v-for="(item, index) in messageList" :key="index">
									<a-menu-item>
										<div @click="goSetting" style="width: 200px" class="boxIncomsss">
											<div :class="{ acts: item.readStatus }" style="color: #02102e" class="setting o-f-2">{{ item.content }}</div>
											<div style="color: #8590a1">{{ getTimes(item.createTime) }}</div>
										</div>
									</a-menu-item>
								</div>
								<div style="text-align: center; text-decoration: underline" class="hand f f-a-c f-j-c">
									<div @click="goMoerNov" class="setting">More</div>
								</div>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
				<div class="avaetImg hand"><img :src="userObj.avatar || ''" style="width: 48px; height: 48px; border-radius: 24px" class="" alt="" /></div>
				<div class="avaet">
					<a-dropdown>
						<a class="ant-dropdown-link hand" @click.prevent>
							{{ userObj.firstName }} {{ userObj.lastName }}
							<img src="/src/assets/serch/xia.png" style="width: 12px; margin-left: 4px" alt="" />
						</a>
						<template #overlay>
							<a-menu style="padding: 20px; margin-top: 30px">
								<a-menu-item>
									<div @click="goKcAppM" class="buying">Switch to buying</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/')" class="KnowClub">Xpert</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/KnowClubAccountSetting')" class="boxIncom f f-a-c">
										<img src="/src/assets/user/setting.png" class="settImg" alt="" />
										<div class="setting">Account setting</div>
									</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/KnowCreateIcome')" class="boxIncom f f-a-c">
										<img src="/src/assets/user/qian.png" class="settImg" alt="" />
										<div class="setting">Income</div>
									</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/KnowClubMyClubb')" class="boxIncom f f-a-c">
										<img src="/src/assets/page/13.png" class="settImg" alt="" />
										<div class="setting">My club</div>
									</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/KnowCreateFavorite')" class="boxIncom f f-a-c">
										<img src="/src/assets/page/14.png" class="settImg" alt="" />
										<div class="setting">Favorite</div>
									</div>
								</a-menu-item>
								<div class="boxIncoms hand f f-a-c f-j-c">
									<div @click="signOut(2)" class="setting">Sign out</div>
								</div>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
			</div>
		</div>
		<!-- 已登录状态的买家tab -->
		<div v-if="ind == 6" class="useLogin m-0-a f f-a-c f-j-b">
			<!-- <div @click="goPageHome" class="leftText hand">KnowClub@ Xpert</div> -->
			<div @click="goPageHome" class="leftImgs hand"><img :src="logoObj.value || '/src/assets/logos.png'" class="logo" alt="" /></div>

			<div class="navRig f f-a-c">
				<div @click="goNav('/')" class="industry hand">Xpert</div>
				<div @click="goNav('/KnowClub/MoreIndustry')" class="industry hand">By industry</div>
				<div @click="goNav('/BuyMyClub')" class="industry hand">My Club</div>
				<div class="message hand"><img src="/src/assets/serch/msg.png" class="msgImg" alt="" /></div>
				{{ ind }}
				<div class="message hand">
					<a-dropdown>
						<a class="ant-dropdown-link hand" @click.prevent>
							<div class="msg">{{ messageNum }}</div>
							<img src="/src/assets/serch/ling.png" class="msgImg" alt="" />
						</a>
						<template #overlay>
							<a-menu style="margin-left: -150px; padding: 10px; margin-top: 20px">
								<div v-for="(item, index) in messageList" :key="index">
									<a-menu-item>
										<div @click="goSetting" style="width: 200px" class="boxIncomsss">
											<div :class="{ acts: item.readStatus }" style="color: #02102e" class="setting o-f-2">{{ item.content }}</div>
											<div style="color: #8590a1">{{ getTimes(item.createTime) }}</div>
										</div>
									</a-menu-item>
								</div>
								<div style="text-align: center; text-decoration: underline" class="hand f f-a-c f-j-c">
									<div @click="goMoerNov" class="setting">More</div>
								</div>
							</a-menu>
						</template>
					</a-dropdown>
				</div>

				<div class="avaetImg hand"><img :src="userObj.avatar || ''" style="width: 48px; height: 48px; border-radius: 24px" class="" alt="" /></div>

				<div class="avaet">
					<a-dropdown>
						<a class="ant-dropdown-link hand" @click.prevent>
							{{ userObj.firstName }} {{ userObj.lastName }}
							<img src="/src/assets/serch/xia.png" style="width: 12px; margin-left: 4px" alt="" />
						</a>
						<template #overlay>
							<a-menu style="padding: 20px; margin-top: 30px">
								<a-menu-item>
									<div @click="goKcAppMai" class="buying">Switch to selling</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/')" class="KnowClub">Xpert</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/KnowClubBuyAccountSetting')" class="boxIncom f f-a-c">
										<img src="/src/assets/user/setting.png" class="settImg" alt="" />
										<div class="setting">Account setting</div>
									</div>
								</a-menu-item>
								<!-- <a-menu-item>
									<div @click="goNav('/KnowCreateIcome')" class="boxIncom f f-a-c">
										<img src="/src/assets/user/qian.png" class="settImg" alt="" />
										<div class="setting">Payment</div>
									</div>
								</a-menu-item> -->
								<a-menu-item>
									<div @click="goNav('/BuyMyClub')" class="boxIncom f f-a-c">
										<img src="/src/assets/page/13.png" class="settImg" alt="" />
										<div class="setting">My club</div>
									</div>
								</a-menu-item>
								<a-menu-item>
									<div @click="goNav('/KnowCreateFavorite?num=2')" class="boxIncom f f-a-c">
										<img src="/src/assets/page/14.png" class="settImg" alt="" />
										<div class="setting">Favorite</div>
									</div>
								</a-menu-item>
								<div class="boxIncoms hand f f-a-c f-j-c">
									<div @click="signOut(2)" class="setting">Sign out</div>
								</div>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import Message from "./message.vue";
	import { getTimes, refrestTokenXP, refrestTokenKC } from "@/utils/setting.js";
	import { GetUserUnread, GetUserUnreadMessage, SellerUserDetails, BuyUserinfo } from "@/api/xpert.js";
	import { GetLogo } from "@/api/commonality.js";
	import { DisplaySellerInformation, BuyUserinfos, GetUserUnreads, GetUserUnreadMessages } from "@/api/knowClub/index.js";
	// import {} from "@/api/knowClub/index.js";
	import { ref, onMounted } from "vue";
	import router from "@/router/index.js";
	import { ArrowDown } from "@element-plus/icons-vue";
	let ind = localStorage.getItem("ind") || 1;
	let message = ref("");
	let messageNum = ref(0);
	let kcId = JSON.parse(localStorage.getItem("logininfo") || "{}").userIdKc;
	let userObj = ref({});
	let messageList = ref([]);
	let logoObj = ref({});
	let list = [
		{
			name: "By Industry",
			value: 1,
			path: "/Industry"
		},
		{
			name: "KnowClub",
			value: 2,
			path: "/KnowClub"
		},
		{
			name: "My orders",
			value: 3,
			path: "/MyOrder"
		},

		// {
		// 	name: "Messages",
		// 	value: 4
		// },
		{
			name: "Login/Join",
			value: 5,
			path: "/Login?act=xp"
		}
	];
	let list4 = [
		{
			name: "Xpert",
			value: 1,
			path: "/"
		},
		{
			name: "By industry",
			value: 2,
			path: "/KnowClub/MoreIndustry"
		},
		{
			name: "My Club",
			value: 3,
			path: "/KnowClubMyClubb"
		},
		{
			name: " Login /Open your club",
			value: 6,
			path: "/Login?act=kc"
		}
	];
	onMounted(async () => {
		if (ind == 2 || ind == 3) {
			// 调用logo
			getLogo("xpert_logo");
			// // 表示是XP
			await getXpMessage();
			await getXpMList();
			if (ind == 2) {
				// 表示卖家
				let n = await SellerUserDetails();
				userObj.value = n.data || {};
			} else if (ind == 3) {
				// 表示买家
				let n = await BuyUserinfo();
				userObj.value = n.data || {};
			}
		} else if (ind == 5 || ind == 6) {
			getLogo("know_club_logo");
			await getXpMessage();
			await getXpMList();
			if (ind == 6) {
				// 表示买家
				let n = await BuyUserinfos();
				userObj.value = n.data || {};
			} else if (ind == 5) {
				// 表示卖家
				let n = await DisplaySellerInformation({ userId: kcId });
				userObj.value = n.data || {};
			}
			// 表示是Kc
			// await refrestTokenKC();
		}
	});
	// 获取xp消息数
	const getXpMessage = async () => {
		let n = null;
		if (ind == 2 || ind == 3) {
			n = await GetUserUnread();
		} else if (ind == 5 || ind == 6) {
			n = await GetUserUnreads();
		}
		messageNum.value = n.data || 0;
	};
	// 获取logo
	const getLogo = async str => {
		let n = await GetLogo({ config: str });
		logoObj.value = n.data;
	};
	// 获取xp消息列表
	const getXpMList = async () => {
		let n = null;
		if (ind == 2 || ind == 3) {
			n = await GetUserUnreadMessage();
		} else if (ind == 5 || ind == 6) {
			n = await GetUserUnreadMessages();
		}
		messageList.value = n.data.list;
	};
	// /点击退出登录
	const signOut = num => {
		if (num == 1) {
			// 表示xp的退出登录
			localStorage.setItem("ind", 1);
			localStorage.removeItem("xpToken");
			localStorage.setItem("home", 1);
			router.push({
				path: "/Login",
				query: {
					act: "xp"
				}
			});
		} else {
			// 从kc跳转到登录页面
			localStorage.setItem("home", 2);
			localStorage.setItem("ind", 4);
			localStorage.removeItem("kcToken");
			router.push({
				path: "/Login",
				query: {
					act: "kc"
				}
			});
		}
	};
	// 组件传值
	const props = defineProps({
		statusTab: {
			default: 1,
			type: Number
		}
	});
	// 去消息通知
	const goMoerNov = () => {
		if (ind == 2) {
			router.push({
				path: "UseNotifications",
				query: {
					act: 2
				}
			});
		} else if (ind == 3) {
			router.push({
				path: "UseNotifications",
				query: {}
			});
		} else if (ind == 5) {
			router.push({
				path: "UseNotifications",
				query: {
					act: 2,
					num: 2
				}
			});
		} else if (ind == 6) {
			router.push({
				path: "UseNotifications",
				query: {
					num: 2
				}
			});
		}
	};
	// 去setting
	const goSetting = () => {
		router.push("/AccountSetting");
	};
	// 去买家setting
	const goBuyerSetting = () => {
		router.push("/BuyAccountSetting");
	};
	// goIndustry
	const goIndustry = () => {
		router.push("/ByIndustry");
	};
	// icome
	const goIcome = () => {
		router.push("/Icome");
	};
	// kc应用跳转到卖家
	const goKcAppMai = () => {
		localStorage.setItem("ind", 5);
		router.replace("/KnowClub");
		if (router.options.history.location == "/KnowClub") {
			router.go(0);
		}
	};
	// kc应用跳转到买家
	const goKcAppM = () => {
		localStorage.setItem("ind", 6);
		router.replace("/KnowClub");
		if (router.options.history.location == "/KnowClub") {
			router.go(0);
		}
	};
	// 切换卖家
	const SwitchSellers = () => {
		localStorage.setItem("ind", 2);
		router.replace("/");
		if (router.options.history.location == "/") {
			// window.location.reload();
			router.go(0);
		}
	};
	// 切换买家
	const SwitchBuy = () => {
		localStorage.setItem("ind", 3);
		router.replace("/");
		if (router.options.history.location == "/") {
			// window.location.reload();
			router.go(0);
		}
	};
	const KnowCreateIcome = () => {
		router.push("/KnowCreateIcome");
	};
	const goNav = (path, index) => {
		if (path == "/Login" && index == 5) {
			// 表示xpert登录
			localStorage.setItem("home", 1);
			localStorage.setItem("ind", 1);
			localStorage.removeItem("xpToken");
			router.push({
				path: "/Login",
				query: {
					act: "xp"
				}
			});
		} else if (path == "/Login" && index == 6) {
			// 表示knowclub登录
			localStorage.setItem("home", 2);
			localStorage.setItem("ind", 4);
			localStorage.removeItem("kcToken");
			router.push({
				path: "/Login",
				query: {
					act: "kc"
				}
			});
		} else {
			router.push(path);
		}
	};
	const goSRequest = () => {
		router.push("/Request");
	};
	const goMylist = () => {
		router.push("/MyList");
	};
	const goMyOrder = () => {
		router.push("/MyOrder");
	};
	const goPageHome = () => {
		console.log(router, "5555555555555555");
		router.push("/KnowClub");
	};
	const goPageHomXp = () => {
		console.log(router, "5555555555555555");
		router.push("/");
	};
	const goUseMyOrder = () => {
		router.push("/UseMyOrder");
	};
	// ==================
	const goKnowclub = () => {
		router.push("/KnowClub");
	};
	const goUseRequest = () => {
		console.log(router, "5555555555555555");
		router.push("/UseRequest");
	};
</script>
<style lang="scss" scoped>
	@function pxfn($px) {
		@return calc($px / 1.5) * 1px;
	}
	.boxIncomsss {
		// height: 40px;
		padding-left: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eaebee;

		.settImg {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}
		.setting {
			font-size: 14px;
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #02102e;
		}
	}
	.boxIncoms {
		height: 40px;
		border-top: 1px solid #eaebee;
		padding-top: 15px;
		.setting {
			font-size: 14px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #02102e;
		}
	}
	.boxIncom {
		height: 40px;
		padding-left: 10px;
		padding-top: 10px;
		border-top: 1px solid #eaebee;
		.settImg {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}
		.setting {
			font-size: 14px;
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #02102e;
		}
	}
	.buying {
		width: 192px;
		height: 40px;
		line-height: 40px;
		border: 1px solid #02102e;
		border-radius: 44px;
		font-size: 14px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		color: #02102e;
	}
	.KnowClub {
		font-size: 14px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		color: #02102e;
		padding-top: 15px;
		padding-bottom: 10px;
	}
	.navRig {
		.avaetImg {
			margin-left: pxfn(53);
			margin-right: 15px;
		}
		.message {
			position: relative;
			width: pxfn(32);
			height: pxfn(32);
			margin-left: pxfn(53);
			.msg {
				position: absolute;
				color: #fff;
				font-size: 10px;
				padding: 2px 6px;
				border-radius: 50%;
				background-color: #ff0000;
				top: -2px;
				right: -4px;
			}
			.msgImg {
				width: 100%;
				height: 100%;
			}
		}
		.industry {
			font-size: pxfn(21.33);
			font-family: Manrope, Manrope-600;
			font-weight: 600;
			text-align: center;
			color: #02102e;
			margin-left: pxfn(53);
		}
		.navItem {
			font-size: pxfn(21.33);
			font-family: Manrope, Manrope-600;
			font-weight: 600;
			text-align: center;
			color: #02102e;
			margin-left: pxfn(53);
		}
	}
	.btn {
		width: pxfn(128);
		height: pxfn(58);
		line-height: pxfn(58);
		background: #02102e;
		border-radius: pxfn(10);
		font-size: pxfn(18);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		color: #ffffff !important;
	}
	.btns {
		width: 175px;
		height: 44px;
		line-height: 44px;
		background: #02102e;
		border-radius: 8px;
		font-size: 14px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		color: #ffffff !important;
	}
	.leftImgs {
		width: 290px;
		height: 48px;
		.logo {
			width: 100%;
			height: 100%;
		}
	}
	.leftText {
		font-size: 36px;
		font-family: Manrope, Manrope-800;
		font-weight: 800;
		text-align: left;
		color: #02102e;
	}
	.leftImg {
		width: pxfn(133.33);
		height: pxfn(74.64);
		.logo {
			width: 100%;
			height: 100%;
		}
	}
	// 设置往下滑的时候背景
	.navBg {
		// filter: blur(10px);
		backdrop-filter: blur(8px);
		// position: absolute;
		// height: 100%;
		// width: 100%;
		// // z-index: -1;
		// background-color: rgba(255, 255, 255, 0.5);
	}
	.xpertNav {
		// background-color: #ffffff;
		position: fixed;
		top: 0;
		z-index: 9;
		width: 100%;
		// width: 1440px;
		// left: 50%;
		// transform: translateX(-50%);
		height: pxfn(120);
		// background-color: pink;
		.center {
			width: 95%;
			height: 100%;
			// background-color: aqua;
		}
		.useLogin {
			width: 95%;
			height: 100%;
			// background-color: aqua;
		}
	}
	.acts {
		color: #8590a1 !important;
	}
</style>
